<template>
<view>
<!--add_comment.wxml-->
<view class="goods-mes pd-bg-fff">
    <view class="goods-img"><image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + options.goods_id + '&width=100&height=100'"></image></view>
    <view class="goods-des">
        <view class="goods-name ellipsis-1">{{options.goods_name}}</view>
        <view class="goods-package ellipsis-1">{{options.spec_key_name!='null'?options.spec_key_name:''}}</view>
    </view>
</view>
<view class="evaluation">
    <textarea class="word-box" placeholder="写下购买体会和使用感受来帮助其他小伙伴吧~" maxlength="500" @input="keyUpChangeNum"></textarea>
    <view class="words-num">{{maxWord}}/500</view>
</view>
<view class="pic-list pd-bg-fff">
    <view v-for="(item, index) in 1" :key="index" class="share-pic">
        <image class="wh100" :src="filePaths[index]?filePaths[index]:defaultPhoto" @tap="selectPhotos" :data-idx="index" @longtap="removePhoto"></image>
    </view>
</view>
<view class="anonymous">
    <icon type="success" size="20" :color="is_anonymous?'red':'gray'" @tap="checkAnonymous"></icon> 匿名评价
</view>
<view class="score-list pd-bg-fff">
    <view class="score-title">
        <view>评分</view>
        <view>满意请给5分哦</view>
    </view>
    <view class="score-item">
        <view>商品符合度</view>
        <view class="stars">
            <image v-for="(item, index) in 5" :key="index" :data-i="index" :src="index<goods_rank?'../../../images/star-red.png':'../../../images/star-gray.png'" @tap="checkGoodsRank"></image>
        </view>
    </view>
    <view class="score-item">
        <view>店家服务态度</view>
        <view class="stars">
            <image v-for="(item, index) in 5" :key="index" :data-i="index" :src="index<service_rank?'../../../images/star-red.png':'../../../images/star-gray.png'" @tap="checkServiceRank"></image>
        </view>
    </view>
    <view class="score-item" v-if="options.prom_type != 5">
        <view>物流发货速度</view>
        <view class="stars">
            <image v-for="(item, index) in 5" :key="index" :data-i="index" :src="index<deliver_rank?'../../../images/star-red.png':'../../../images/star-gray.png'" @tap="checkDeliverRank"></image>
        </view>
    </view>
</view>
<view class="btn-wrap">
    <view class="submit-btn" @tap="submitComment">提 交</view>
</view>
</view>
</template>

<script>
// add_comment.js
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;
var util = require("../../../utils/util.js");
var select = require("../../../utils/selectFiles.js");

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      defaultPhoto: setting.resourceUrl + "/static/static/images/camera.png",
      filePaths: [],
      //本地图片的路径
      uploadPath: [],
      //上传图片的路径
      maxWord: 0,
      is_anonymous: false,
      goods_rank: 5,
      service_rank: 5,
      deliver_rank: 5,
      content: '',
      options: null,
      isLongPress: false //是否进行长按图片操作,解决有些手机上短按和长按同时触发的问题

    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.setData({
      options: options
    });
  },
  methods: {
    keyUpChangeNum: function (e) {
      this.setData({
        maxWord: e.detail.value.length
      });
      this.content = e.detail.value;
    },
    checkAnonymous: function () {
      this.setData({
        is_anonymous: !this.is_anonymous
      });
    },
    checkGoodsRank: function (e) {
      this.setData({
        goods_rank: parseInt(e.currentTarget.dataset.i) + 1
      });
    },
    checkServiceRank: function (e) {
      this.setData({
        service_rank: parseInt(e.currentTarget.dataset.i) + 1
      });
    },
    checkDeliverRank: function (e) {
      this.setData({
        deliver_rank: parseInt(e.currentTarget.dataset.i) + 1
      });
    },

    /** 选择照片 */
    selectPhotos: function (e) {
      if (this.isLongPress) {
        this.isLongPress = false;
        return;
      }

      var that = this;
      select.selectPhotos(this.filePaths, e.currentTarget.dataset.idx, function (filePaths) {
        that.setData({
          filePaths: filePaths
        });
      });
    },

    /** 删除单张图片 */
    removePhoto: function (e) {
      var that = this;
      this.isLongPress = true;
      select.removePhoto(this.filePaths, e.currentTarget.dataset.idx, function (filePaths) {
        that.setData({
          filePaths: filePaths
        });
      });
    },

    /** 提交评论 */
    submitComment: function () {
      var that = this;

      if (!that.content) {
        return app.globalData.showTextWarining("请输入评论内容");
      }

      if (that.options.prom_type != 5) {
        if (!that.service_rank || !that.goods_rank || !that.deliver_rank) {
          return app.globalData.showTextWarining("请先打完分");
        }
      } else {
        if (!that.service_rank || !that.goods_rank) {
          return app.globalData.showTextWarining("请先打完分");
        }
      }

      this.uploadPhotos(function () {
        request.post('/api/user/add_comment', {
          data: Object.assign({
            is_anonymous: that.is_anonymous ? 1 : 0,
            goods_rank: that.goods_rank,
            service_rank: that.service_rank,
            deliver_rank: that.deliver_rank,
            content: that.content,
            goods_id: that.options.goods_id,
            order_id: that.options.order_id,
            rec_id: that.options.rec_id,
            item_id: that.options.item_id ? that.options.item_id : ''
          }, util.convertRequestArray('img', that.uploadPath)),
          success: function (res) {
            if (that.options.order_type == 'virtual') {
              uni.setStorageSync('virtual:virtual_list:update', true);
            } else {
              uni.setStorageSync('user:comment:update', true);
            }

            app.globalData.showSuccess('评论成功', function () {
              uni.navigateBack();
            });
          }
        });
      });
    },

    /** 上传图片 */
    uploadPhotos: function (call, pathIdx) {
      if (this.filePaths.length == 0) {
        return call();
      }

      if (typeof pathIdx != 'number') {
        pathIdx = 0;
      } else if (pathIdx >= this.filePaths.length) {
        return call();
      }

      var that = this;
      request.uploadFile('/api/user/upload_comment_img', {
        filePath: that.filePaths[pathIdx],
        name: 'img_file',
        success: function (res) {
          that.uploadPath[pathIdx] = res.data.result;
          that.uploadPhotos(call, pathIdx + 1); //递归上传多张图片
        }
      });
    }
  }
};
</script>
<style>
/* add_comment.wxss */
.goods-mes{
    display: flex;
    justify-content:space-between;
    overflow:hidden;
    padding: 38rpx 30rpx;
}
.goods-img{
    width: 132rpx;
    height: 132rpx;
    overflow: hidden;
    margin-right: 38rpx;
}
.goods-des{
    width: 560rpx;
}
.goods-des>view{
    width: 100%;
    height: 32rpx;
    line-height: 1;
    font-size: 26rpx;
    color: #444;
    margin-top: 10rpx;
}
.goods-package{
    margin-top: 36rpx;
    font-size: 22rpx!important;
    color: #999999!important;
}
.evaluation{
    padding: 30rpx 30rpx;
    position: relative;
    font-size: 26rpx;
}
.word-box{
    color: #444;
    line-height: 40rpx;
    width: 100%;
    height: 200rpx;
    font-size: 26rpx;
}
.words-num{
    position: absolute;
    right:30rpx;
    bottom:30rpx;
    color: #777;
}
.pic-list{
    padding:40rpx 30rpx 20rpx;
    justify-content: space-around;
}
.share-pic{
    width: 140rpx;
    height: 140rpx;
    overflow: hidden;
}
.anonymous{
    height:60rpx;
    padding:0 20rpx 20rpx;
    color: #191919;
    display: flex;
    align-items: center;
    font-size: 26rpx;
    background-color: #ffffff;
}
.anonymous>icon{
    margin-right: 20rpx;
}
.score-list{
    margin-top: 20rpx;
    padding: 0 50rpx;
    font-size: 26rpx;
}
.score-list>view{
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    color: #444;
}
.score-title{
    height: 90rpx;
    line-height: 90rpx;
}
.score-title view{
  font-size: 26rpx;
}
.score-title view:first-child{
  font-weight: bold;
  position: relative;
}
.score-title view:first-child::before{
  content: '';
  width: 4rpx;
  height: 22rpx;
  background-color: #000000;
  position: absolute;
  top: 35rpx;
  left: -20rpx;
}
.score-title view:last-child{
  color: #666666;
}
.score-item{
    align-items: center;
    height: 80rpx;
}
.stars{
    display: flex;
}
.stars image{
    width: 44rpx;
    height: 40rpx;
}
.btn-wrap{
    padding: 20rpx 0;
    background-color: #fff;
    border-top: 1px solid #f3f3f3;
}
.submit-btn{
    width: 320rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color:#f15353;
    color: #fff;
    margin:auto;
    border-radius: 40rpx;
}

</style>